<template>
  <div class="message-page">
    <!-- 顶部导航 -->
    <div class="nav-header">
      <div class="back-btn" @click="goBack">
        <i class="arrow-left">←</i>
      </div>
      <div class="title">新建群发</div>
      <div class="history" @click="goToHistory">群发历史</div>
    </div>

    <!-- 消息内容区域 -->
    <div class="message-content">
      <textarea
        v-model="messageContent"
        :maxlength="maxLength"
        placeholder="可将教学通知/文章等消息多多转给学生"
        class="message-input"
      ></textarea>
      <div class="word-count">{{ messageContent.length }}/{{ maxLength }}</div>
    </div>

    <!-- 接收人选择区域 -->
    <div class="receiver-section" @click="goToSelectDisease">
      <div class="section-header">
        <span class="title">接收人</span>
        <span class="count" v-if="selectedPatients.length">
          (已选择{{ selectedPatients.length }}人)
        </span>
        <i class="arrow-right">></i>
      </div>
      <div class="selected-receivers" v-if="selectedPatients.length">
        <div v-for="(patient, index) in selectedPatients.slice(0, 3)"
             :key="index"
             class="receiver-item">
          <img src="@/assets/images/屏幕截图 2025-03-13 165102.png" class="avatar" alt="头像">
          <span class="name">{{ patient.userName }}</span>
        </div>
      </div>
    </div>

    <!-- 底部说明文字 -->
    <div class="bottom-tips">
      每日发送上限为10条，今日还可发送8条
    </div>

    <!-- 发送按钮 -->
    <div class="send-button-wrapper">
      <button class="send-button" @click="handleSend">确认发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageContent: '',
      maxLength: 300,
      selectedPatients: []
    }
  },
  methods: {
    handleSend() {
      // 处理发送逻辑
      console.log('发送消息:', this.messageContent)
    },
    goBack() {
      this.$router.go(-1)
    },
    goToHistory() {
      this.$router.push('/history')
    },
    goToSelectDisease() {
      this.$router.push('/selectDisease')
    }
  }
}
</script>


<style scoped lang="scss">
.message-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;

  .back-btn {
    font-size: 20px;
    color: #333;
  }

  .title {
    font-size: 18px;
    font-weight: 500;
  }

  .history {
    color: #007AFF;
    font-size: 14px;
    cursor: pointer;

    &:active {
      opacity: 0.8;
    }
  }
}

.message-content {
  padding: 16px;
  background-color: #fff;
  margin-top: 10px;

  .message-input {
    width: 100%;
    height: 150px;
    border: none;
    resize: none;
    font-size: 16px;
    line-height: 1.5;
    &::placeholder {
      color: #999;
    }
  }

  .word-count {
    text-align: right;
    color: #999;
    font-size: 14px;
    margin-top: 8px;
  }
}

.receiver-section {
  background-color: #fff;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;

    .title {
      font-size: 16px;
      color: #333;
      font-weight: 500;
    }

    .count {
      font-size: 14px;
      color: #999;
      margin-left: 8px;
    }

    .arrow-right {
      margin-left: auto;
      color: #999;
    }
  }

  .selected-receivers {
    display: flex;
    gap: 16px;

    .receiver-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;

      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #409EFF;
      }

      .name {
        font-size: 12px;
        color: #666;
      }
    }
  }
}

.bottom-tips {
  padding: 16px;
  color: #999;
  font-size: 12px;
  text-align: center;
}

.send-button-wrapper {
  padding: 16px;
  margin-top: auto;

  .send-button {
    width: 100%;
    height: 44px;
    background-color: #007AFF;
    color: white;
    border: none;
    border-radius: 22px;
    font-size: 16px;
    font-weight: 500;

    &:active {
      opacity: 0.9;
    }
  }
}
</style>
